<template>
  <el-header class="top-nav">
    <div class="nav-content">
      <div class="brand" @click="$router.push({ name: 'home' })">AI Cang</div>
      <el-menu
        v-if="userStore.isLoggedIn"
        :default-active="$route.name"
        mode="horizontal"
        class="top-menu"
        background-color="transparent"
        :ellipsis="false"
        :router="false"
        @select="onSelectMenu"
      >
        <el-menu-item v-if="userStore.hasPermission('chat')" index="home">AI对话</el-menu-item>
        <el-menu-item v-if="userStore.hasPermission('prompts')" index="prompts">提示词库</el-menu-item>
        <el-menu-item v-if="userStore.hasPermission('knowledge')" index="knowledge">知识库</el-menu-item>
      </el-menu>
      <div class="user-area" v-if="userStore.isLoggedIn">
        <!-- 管理面板按钮 -->
        <el-button 
          v-if="userStore.hasPermission('user_management')" 
          text 
          @click="$router.push({ name: 'admin' })"
          class="admin-btn"
        >
          <el-icon><Monitor /></el-icon>
          管理面板
        </el-button>
        
        <!-- 用户下拉菜单 -->
        <el-dropdown @command="handleUserCommand">
          <span class="user-info">
            <el-avatar :size="32">
              <el-icon><User /></el-icon>
            </el-avatar>
            <span class="username">{{ userStore.user?.username }}</span>
            <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="settings">
                <el-icon><Setting /></el-icon>
                设置
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

    </div>
  </el-header>
</template>

<script>
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { authService } from '@/services/auth'
import {
  User, ArrowDown, Setting, Monitor, SwitchButton
} from '@element-plus/icons-vue'

export default {
  name: 'TopNav',
  components: {
    User, ArrowDown, Setting, Monitor, SwitchButton
  },
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    
    const onSelectMenu = (key) => {
      if (key === 'home') router.push({ name: 'home' })
      if (key === 'prompts') router.push({ name: 'prompts' })
      if (key === 'knowledge') router.push({ name: 'knowledge' })
      if (key === 'admin') router.push({ name: 'admin' })
    }
    
    const handleUserCommand = async (command) => {
      switch (command) {
        case 'settings':
          router.push({ name: 'settings' })
          break
          
        case 'logout':
          try {
            await ElMessageBox.confirm(
              '确定要退出登录吗？',
              '确认',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
            )
            
            await authService.logout()
            userStore.logout()
            ElMessage.success('已退出登录')
            router.push({ name: 'login' })
            
          } catch (error) {
            if (error !== 'cancel') {
              console.error('登出失败:', error)
              userStore.logout()
              router.push({ name: 'login' })
            }
          }
          break
      }
    }
    
    return {
      userStore,
      onSelectMenu,
      handleUserCommand
    }
  }
}
</script>

<style scoped>
.top-nav {
  height: var(--header-height);
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 0;
  box-shadow: var(--shadow-sm);
}

.nav-content {
  height: 100%;
  width: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.brand:hover {
  color: var(--accent-2);
}

.top-menu {
  flex: 1;
  margin: 0 40px;
  border-bottom: none;
}

.top-menu .el-menu-item {
  border-bottom: 2px solid transparent !important;
  color: var(--text);
  font-weight: 500;
  transition: all 0.2s;
}

.top-menu .el-menu-item:hover {
  background-color: rgba(61, 85, 236, 0.1) !important;
  color: var(--accent) !important;
}

.top-menu .el-menu-item.is-active {
  background-color: transparent !important;
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

.user-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-btn {
  color: var(--accent);
  font-weight: 500;
}

.admin-btn:hover {
  color: var(--accent-2);
  background-color: rgba(61, 85, 236, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.user-info:hover {
  background-color: rgba(61, 85, 236, 0.1);
}

.username {
  margin: 0 8px;
  font-weight: 500;
  color: var(--text);
}

.dropdown-icon {
  color: var(--muted);
}


</style>


